<template>
  <div>
    <div>
      <DoggThree
        v-for="(item, index) in list"
        :key="index"
        :dogImgUrl="item.dogImgUrl"
        :dogName="item.dogName"
        :index="index"
        @dianjiFn="dianjiFn"
      >
      </DoggThree>
      <div>
        <ul>
          <li v-for="(item, index) in arr" :key="index">
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import DoggThree from './components/DoggThree.vue'
//

export default {
  components: {
    DoggThree: DoggThree,
  },
  methods: {
    dianjiFn(index) {
      this.arr.push(this.arr[index])
    },
  },
  data() {
    return {
      arr: [],
      list: [
        {
          dogImgUrl:
            'http://www.euro-premium.cn/sites/default/files/2017/06/2017-06-12-109.jpg',
          dogName: '博美',
        },
        {
          dogImgUrl:
            'https://heepet.com/uploads/2020/12/Can-a-teddy-dog-dock-its-tail-in-two-months.jpg',
          dogName: '泰迪',
        },
        {
          dogImgUrl:
            'https://c-ssl.duitang.com/uploads/item/201601/30/20160130005420_4G2tr.jpeg',
          dogName: '金毛',
        },
        {
          dogImgUrl:
            'https://img.zswxy.cn/uploads/images/20181008/1538991072968333.jpg',
          dogName: '哈士奇',
        },
        {
          dogImgUrl:
            'https://img14.360buyimg.com/n0/jfs/t1/93712/1/23290/98684/62259d58Ea80a4eb2/7c6535b24213ca4c.jpg',
          dogName: '阿拉斯加',
        },
        {
          dogImgUrl:
            'https://pics4.baidu.com/feed/78310a55b319ebc45b6a34d4f2a2e6f71f1716f8.jpeg@f_auto?token=a61f1ebe3d88d7a89cc5da8c0674141djnnbh   ',
          dogName: '萨摩耶',
        },
      ],
    }
  },
}
</script>

<style></style>
